<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font_l23hbmjtmql/iconfont.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
</head>
<!-- 199010224 黄咏诗 -->
<body>
    <div class="box">
        <!--上面部分-->
        <div class="box-hd">
            <h2 class="title">手机</h2>
            <div class="more">
                <a href="">
                    查看更多
                    <i class="iconfont icon-gengduo" alt=""></i>
                </a>
            </div>
        </div>
        <!--内容部分-->
        <div class="box-bd">
            <!--左边部分-->
            <div class="span1">
                <ul class="brick-promo-list">
                    <a href="">
                        <img src="images/ad1.png" alt="">
                    </a>
                </ul>
            </div>
            <!--右边部分-->
            <div class="span2">
                <div id="root" v-cloak>
                    <li v-for="item in phoneList" >
                        <img v-bind:src="item.img" alt="">
                        <p >{{item.title}}</p>
                        <p style="color: #888;">{{item.name}}</p>
                        <p class="price">{{item.price}}</p>
                    </li>
                </div>
            </div>
        </div>
    </div>
    
    

    <script>
       const app = Vue.createApp({
            data(){
                return{
                    phoneList:[//列表内容
                        {
                        id:'01',
                        img:'images/phone1.png',
                        title:'Redmi k50电竞版',
                        name:'全线拉满的冷血旗舰',
                        price:'3299元起'
                    },
                    {
                        id:'02',
                        img:'images/phone2.png',
                        title:'Xiaomi 12 Pro',
                        name:'全新骁龙8|2K AMOLED屏幕',
                        price:'4699元起'
                    },
                    {
                        id:'03',
                        img:'images/phone3.png',
                        title:'Xiaomi 12',
                        name:'全新骁龙8|5000万主摄',
                        price:'3699元起'
                    },
                    {
                        id:'04',
                        img:'images/phone4.png',
                        title:'Xiaomi 12X',
                        name:'骁龙870|5000万主摄',
                        price:'2999元起'
                    },
                    {
                        id:'05',
                        img:'images/phone5.png',
                        title:'Xiaomi 11 青春活力版',
                        name:'轻薄5G，内外皆出彩',
                        price:'1899元起'
                    },
                    {
                        id:'06',
                        img:'images/phone6.png',
                        title:'Redmi Note 11 Pro系列',
                        name:'三星AMOLED高刷屏',
                        price:'1799元起'
                    },
                    {
                        id:'07',
                        img:'images/phone7.png',
                        title:'Redmi Note 11 5G',
                        name:'5000mAh大电量',
                        price:'1199元起'
                    },
                    {
                        id:'08',
                        img:'images/phone8.png',
                        title:'Redmi Note 11 4G',
                        name:'5000mAh大电量',
                        price:'969元起'
                    },
                    ]
                }
            }
        })// 创建应用实例
        const vm = app.mount("#root");// 挂载到跟组件
    </script>
</body>
</html>